<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>渐变</title>
    <style type="text/css">
      /* ************************************************************** */
      html:root {
        --box-width: 350px;
        --box-height: fit-content;
      }
      /* ************************************************************** */
      /* ************************************************************** */
      .box {
        height: 150px;
        width: 150px;
        border: 3px solid black;
        color: white;
      }
      .case-linegradient1 {
        background-image: linear-gradient(red, blue);
      }
      .case-linegradient2 {
        background-image: linear-gradient(to left top, red, blue);
      }
      .rule-box-linegradient {
        height: 150px;
        width: 150px;
        border: 3px solid black;
        border-radius: 50%;
        position: relative;
      }
      .rule-box-linegradient .center {
        background-color: black;
        display: inline-block;
        height: 10px;
        width: 10px;
        border-radius: 50%;
        position: absolute;
        inset: 0;
        margin: auto;
      }
      .rule-box-linegradient .center::before {
        content: '';
        position: absolute;
        left: 6px;
        top: 3px;
        width: 75px;
        height: 3px;
        background-color: black;
        display: block;
      }
      .rule-box-linegradient .center::after {
        content: '0°';
        position: absolute;
        left: 60px;
        top: -15px;
      }
      .rule-box-linegradient::before {
        content: '';
        position: absolute;
        left: 73px;
        top: 0px;
        width: 3px;
        height: 75px;
        background-color: black;
        display: block;
      }
      .rule-box-linegradient::after {
        content: '90°';
        position: absolute;
        left: 45px;
        top: 15px;
      }
      .case-linegradient3 {
        background-image: linear-gradient(
          to left,
          red 75px,
          violet 75px 100px,
          blue 100px
        );
      }
      .case-linegradient4 {
        background-image: linear-gradient(
          to left,
          red 75px,
          violet 0px,
          blue 100px
        );
      }
      .case-linegradient5 {
        background-image: linear-gradient(to left, red, 20%, blue);
      }

      .case-radialgradient1 {
        background-image: radial-gradient(red, blue);
      }
      .case-radialgradient2 {
        background-image: radial-gradient(40px, red, blue);
      }
      .case-radialgradient3 {
        background-image: radial-gradient(50% 50% at left top, red, blue);
      }
      .case-radialgradient4 {
        background-image: radial-gradient(
          circle at left 100px top 50px,
          red,
          blue
        );
      }
      input:checked + * + * + * + * + * + * + * + * {
        background-image: radial-gradient(
          closest-side circle at left 100px top 50px,
          red,
          blue
        );
      }
      input:checked + * + * + * + * + * + * {
        background-image: radial-gradient(
          closest-corner circle at left 100px top 50px,
          red,
          blue
        );
      }
      input:checked + * + * + * + * {
        background-image: radial-gradient(
          farthest-side circle at left 100px top 50px,
          red,
          blue
        );
      }
      input:checked + * + * {
        background-image: radial-gradient(
          farthest-corner circle at left 100px top 50px,
          red,
          blue
        );
      }

      .button {
        height: 40px;
        width: 80px;
        border: 1px solid black;
        border-radius: 4px;
        background-color: rgb(71, 184, 212);
      }
      .radial-gradient-demo1 {
        background-image: radial-gradient(
            farthest-side at left bottom,
            rgba(255, 0, 255, 0.5),
            transparent
          ),
          radial-gradient(
            farthest-side at right bottom,
            rgba(255, 255, 20, 0.5),
            transparent
          );
      }
      .radial-gradient-demo1:active {
        box-shadow: inset 0 0 0 999px rgba(0, 0, 0, 0.1);
      }
      .radial-gradient-demo2 {
        background-image: radial-gradient(
          100% 80% at 50% 20%,
          hsla(0, 0%, 100%, 0.3) 50%,
          hsla(0, 0%, 100%, 0) 52%
        );
      }
      .radial-gradient-demo2:active {
        background-image: radial-gradient(
          100% 80% at 50% 20%,
          hsla(0, 0%, 100%, 0.2) 50%,
          hsla(0, 0%, 100%, 0) 52%
        );
      }
      .radial-gradient-demo3 {
        background-image: radial-gradient(
          closest-side circle,
          red 99%,
          transparent
        );
        background-repeat: no-repeat;
        background-position: center;
        background-size: 0% 0%;
        transition: all 0.2s;
      }
      .radial-gradient-demo3:active {
        background-size: 250% 250%;
      }
      .radial-gradient-demo4 {
        width: 200px;
        height: 100px;
        background: linear-gradient(to top, transparent 10px, red 10px)
            no-repeat,
          radial-gradient(
            20px 15px at left 50% bottom 10px,
            red 10px,
            transparent 11px
          );
        background-size: auto, 20px 10px;
      }

      .case-conicgradient1 {
        background-image: conic-gradient(red, blue);
      }
      .case-conicgradient2 {
        border-radius: 50%;
        background-image: conic-gradient(red 40%, blue 40% 90%, green 0);
      }

      .case-repeating1 {
        background-image: repeating-linear-gradient(transparent, blue 40px);
      }
      .case-repeating2 {
        background-image: repeating-radial-gradient(transparent, blue 40px);
      }
      .case-repeating3 {
        background-image: repeating-conic-gradient(transparent, blue 40deg);
      }
      /* ************************************************************** */
      /* ************************************************************** */
    </style>
  </head>
  <body>
    <!-- ------------------------------------------------------------->
    <!-- ------------------------------------------------------------->
    <header>
      <a href="./12-calc.html">上一篇</a>
      <a href="./14-3d变幻.html">下一篇</a>
    </header>
    <!-- ------------------------------------------------------------->
    <!-- ------------------------------------------------------------->
    <section class="demo-box">
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>线性渐变 linear-gradient</dt>
        <dd>
          <i>语法</i>
          <pre><code>linear-gradient(
[ &lt;angle&gt; | to &lt;side-or-corner&gt; ,]? &lt;color-stop-list&gt; )
\---------------------------------/ \----------------------------/
Definition of the gradient line        List of color stops
          
where &lt;side-or-corner&gt; = [ left | right ] || [ top | bottom ]
  and &lt;color-stop-list&gt; = [ &lt;linear-color-stop&gt; [, &lt;color-hint&gt;? ]? ]#, &lt;linear-color-stop&gt;
  and &lt;linear-color-stop&gt; = &lt;color&gt; [ &lt;color-stop-length&gt; ]?
  and &lt;color-stop-length&gt; = [ &lt;percentage&gt; | &lt;length&gt; ]{1,2}
  and &lt;color-hint&gt; = [ &lt;percentage&gt; | &lt;length&gt; ]</code></pre>
        </dd>
        <dd>
          <div class="box case-linegradient1"></div>
        </dd>
        <dd>
          <pre><code class="language-scss">
background-image: 
linear-gradient(red, blue);</code></pre>
        </dd>
        <dd>
          <div class="box case-linegradient2" style="width: 250px;">
            使用"to left top"这种定位，可以自适应方向；而指定角度则不行
          </div>
        </dd>
        <dd>
          <h4>
            渲染规则
          </h4>
          如下，从中心点触发；往下角度为负；默认-90deg或"to bottom"
          <div class="rule-box-linegradient">
            <span class="center"></span>
          </div>
        </dd>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>渲染断点（所有渐变适用）</dt>
        <dd>
          <div class="rule-box-linegradient case-linegradient3">
            <span class="center"></span>
          </div>
          <pre><code class="language-scss">
  background-image: 
  linear-gradient(to left, 
  red 75px, 
  violet 75px 100px, 
  blue 100px);
  // 方向如图所示，left是-90°，所以从右往左
  // 其中的数值，指的是这条渐变轴上的坐标</code></pre>
          1、
          <div
            class="box case-linegradient4"
            style="width: 300px; height: 75px;"
          >
            当断点设置的坐标比前一个小，直接按前一个的值渲染。
          </div>
          2、出现锯齿，可以使用1px来缓冲
          <br />
          3、
          <div
            class="box case-linegradient5"
            style="width: 300px; height: 75px;"
          >
            linear-gradient( to left, red, 20%, blue); 该写法IE不支持
          </div>
        </dd>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>径向渐变 radial-gradient</dt>
        <dd>
          <i>语法</i>
          <pre><code>&lt;radial-gradient()&gt; = 
            radial-gradient( [ &lt;ending-shape&gt; || &lt;size&gt; ]? [ at &lt;position&gt; ]? , &lt;color-stop-list&gt; )  
          
          &lt;size&gt; = 
            &lt;extent-keyword&gt;              |
            &lt;length [0,∞]&gt;                |
            &lt;length-percentage [0,∞]&gt;{2}  
          
          &lt;position&gt; = 
            [ left | center | right ] || [ top | center | bottom ]  |
            [ left | center | right | &lt;length-percentage&gt; ] [ top | center | bottom | &lt;length-percentage&gt; ]?  |
            [ [ left | right ] &lt;length-percentage&gt; ] &amp;&amp; [ [ top | bottom ] &lt;length-percentage&gt; ]  
          
          &lt;color-stop-list&gt; = 
            &lt;linear-color-stop&gt; , [ &lt;linear-color-hint&gt;? , &lt;linear-color-stop&gt; ]#  
          
          &lt;extent-keyword&gt; = 
            closest-corner   |
            closest-side     |
            farthest-corner  |
            farthest-side    
          
          &lt;length-percentage&gt; = 
            &lt;length&gt;      |
            &lt;percentage&gt;  
          
          &lt;linear-color-stop&gt; = 
            &lt;color&gt;               &amp;&amp;
            &lt;length-percentage&gt;?  
          
          &lt;linear-color-hint&gt; = 
            &lt;length-percentage&gt;  </code></pre>
        </dd>
        <dd>
          <div class="box case-radialgradient1"></div>
        </dd>
        <dd>
          <h4>设置渐变半径</h4>
          1、默认radial-gradient(50% 50%, color...)
          <br />
          2、radial-gradient(水平方向 垂直方向, color...);
          <br />
          3、合写只能用数值，如 radial-gradient(50px, color...);
          <br />
          <div class="box case-radialgradient2"></div>
        </dd>
        <dd>
          <h4>设置渐变中心</h4>
          1、语法：radial-gradient(50% 50% at &lt;position&gt;, ...);
          <div class="box case-radialgradient3"></div>
        </dd>
        <dd>
          <h4>设置渐变终点</h4>
          1、默认最远
          <br />
          2、语法：radial-gradient(&lt;extent-keyword&gt; (circle | ellipse) at
          &lt;position&gt;, ...);由于默认是椭圆，所以没有任何理由使用ellipse
          <br />
          3、
          <input type="checkbox" />
          closest-side: 渐变中心最近的边
          <br />
          <input type="checkbox" />
          closest-corner: 渐变中心最近的角
          <br />
          <input type="checkbox" />
          farthest-side: 渐变中心最远的边
          <br />
          <input type="checkbox" />
          farthest-corner: 渐变中心最远的角（默认值）
          <br />
          <div class="box case-radialgradient4"></div>
        </dd>
        <h4>径向渐变的四个例子</h4>
        <dd>
          <button class="button radial-gradient-demo1">按钮</button>
        </dd>
        <dd>
          <button class="button radial-gradient-demo2">按钮</button>
        </dd>
        <dd>
          <button class="button radial-gradient-demo3">按钮</button>
        </dd>
        <dd>
          <div class="radial-gradient-demo4"></div>
        </dd>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>锥形渐变conic-gradient</dt>
        <dd>
          <pre><code class="language-scss">
conic-gradient([ from &lt;angle&gt; ] ? 
[at &lt;position&gt; ] ?,
&lt;angular-color-stop-list&gt;);</code></pre>
          <br />
          ps：顺时针；图中的分界线为0°；
        </dd>
        <dd>
          <div class="box case-conicgradient1"></div>
        </dd>
        <dd>
          实现饼图
          <div class="box case-conicgradient2"></div>
        </dd>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>重复渐变</dt>
        <dd>
          在普通渐变的基础上加个repeating
          <br />
          区别在于，重复渐变若不指定起止，就会默认0% 100%，就和普通的没区别了
        </dd>
        <dd>
          <div class="box case-repeating1"></div>
        </dd>
        <dd>
          <div class="box case-repeating2"></div>
        </dd>
        <dd>
          <div class="box case-repeating3"></div>
        </dd>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
    </section>
    <!-- ------------------------------------------------------------->
    <!-- ------------------------------------------------------------->
    <link rel="stylesheet" href="./0-模板.css" />
    <link
      rel="stylesheet"
      href="../../Module/hightlight/styles/hybrid.min.css"
    />
    <script src="../../Module/hightlight/highlight.min.js"></script>
    <script>
      hljs.highlightAll()
    </script>
  </body>
</html>
